<template>
  <div id="app">
    <mu-appbar style="width: 100%;" color="primary" class="fixed-position">
      <mu-button icon slot="left" @click="toggleDrawer()">
        <mu-icon value="menu"></mu-icon>
      </mu-button>
      {{appTitle}}
      <mu-menu slot="right">
        <mu-button flat @click="minimizeWindow()">
          <mu-icon value=":fa fa-minus"></mu-icon>
        </mu-button>
        <mu-button flat @click="closeWindow()">
          <mu-icon value=":fa fa-times"></mu-icon>
        </mu-button>
      </mu-menu>
    </mu-appbar>
    <el-drawer
     :direction="direction"
     :visible.sync="isOpenDrawer"
     :show-close="showCloseButtonInDrawer"
     @open="onDrawOpen()">
        <mu-list>
            <mu-list-item button :ripple="false" @click="drawerListItemClick('/list/file')">
              <mu-list-item-action>
                <mu-icon value="description"></mu-icon>
              </mu-list-item-action>
              <mu-list-item-title><span style="font-family: 微软雅黑;">文件分享</span></mu-list-item-title>
            </mu-list-item>
            <mu-list-item button :ripple="false" @click="drawerListItemClick('/list/text')">
              <mu-list-item-action>
                <mu-icon value="inbox"></mu-icon>
              </mu-list-item-action>
              <mu-list-item-title><span style="font-family: 微软雅黑;">文字分享</span></mu-list-item-title>
            </mu-list-item>
          </mu-list>
    </el-drawer>
    <div class="router-page">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  import { remote } from 'electron'
  
  export default {
    name: 'ishare',
    data: function(){
      return {
        isOpenDrawer: false,
        direction: 'ltr', // drawer在左侧
        showCloseButtonInDrawer: false,
        appTitle: ''
      }
    },
    methods: {
      minimizeWindow() {
        const browserWindow = remote.getCurrentWindow();
        browserWindow.minimize();
      },
      closeWindow() {
        const browserWindow = remote.getCurrentWindow();
        browserWindow.close();
      },
      toggleDrawer(){
        if(this.$data.isOpenDrawer === false){
          this.$data.isOpenDrawer=true;
        }else{
          this.$data.isOpenDrawer=false;
        }
      },
      onDrawOpen(){
        if(this.$data.isOpenDrawer === true){
          // 调整drawer位置
          document.querySelector('.ltr').style.top = '56px';
          // 隐藏drawer的title区域
          document.querySelector('.el-drawer__header').style.display = 'none';
          // 隐藏因drawer打开而出现的滚动条
          document.querySelector('.el-dialog__wrapper').style.overflowY = 'hidden';
        }
      },
      drawerListItemClick(url){
        // 如果route-view中的当前页面和url指定的页面不一致的时候才跳转
        if(url != this.$route.path){
          this.$router.push(url);
        }
        this.$data.isOpenDrawer = false;
      },
      setAppTitle(){
        // 根据路由判断当前页面
        // 设置页面标题
        if(this.$route.path === '/list/file' || this.$route.path === '/add/file'){
          this.$data.appTitle = 'Ishare 文件分享';
        }else if(this.$route.path === '/list/text' || this.$route.path === '/add/text'){
          this.$data.appTitle = 'Ishare 文本分享';
        }
      },
      setAppWindowSize(){
        /*const {remote} = require('electron');
        if(this.$route.path.startsWith('/add/')){
          remote.getCurrentWindow().setSize(1000, 648);
        }
        else if(this.$route.path.startsWith('/list/')){
          remote.getCurrentWindow().setSize(460, 580);
        }*/
      },
      adjustWindow(){
        this.setAppTitle();
        this.setAppWindowSize();
      }
    },
    created(){
      this.adjustWindow();
    },
    mounted: function() {
      // 给AppBar添加拖拽功能
      // 使得无边框应用可以被拖动
      document.querySelector('.mu-appbar-title').style['-webkit-app-region'] = 'drag';
    },
    watch: {
      // 如果路由有变化，会再次执行该方法
      '$route': 'adjustWindow'
    },
  }
</script>

<style>
  /* 去除窗口滚动条 */
  ::-webkit-scrollbar {display:none}
 
  /* 固定AppBar的位置 */
  .fixed-position{
    position:fixed;
  }
  /* 偏移router-view中的内容，防止被AppBar遮挡 */
  .router-page{
    padding-top: 55px;
  }
</style>
